<template>
  <component
    :is="all[type]"
    v-if="isShow(properties)"
    ref="item"
    :attrs="attrs"
    :extend-attrs="extendAttrs"
    :properties="properties"
    :form="form"
    :children="children"
    :type="type"
    :disable-item="disableItem"
    @change="
      (v) => {
        $emit('change', v)
      }
    "
  >
    <template #item="{ properties, type }">
      <slot name="item" :properties="properties" :type="type"></slot>
    </template>
  </component>
</template>
<script>
import FormItem from './FormItem.vue'
import BaseItem from './BaseItem.js'
import DividerItem from './DividerItem.vue'
import CardItem from './CardItem.vue'
import TabItem from './TabItem.vue'
import { shallowRef } from 'vue'
export default {
  name: 'Item',
  extends: BaseItem,
  emits: ['change'],
  data() {
    return {
      all: {
        select: shallowRef(FormItem),
        input: shallowRef(FormItem),
        radio: shallowRef(FormItem),
        checkbox: shallowRef(FormItem),
        inputNumber: shallowRef(FormItem),
        switch: shallowRef(FormItem),
        selectTree: shallowRef(FormItem),
        datetime: shallowRef(FormItem),
        img: shallowRef(FormItem),
        file: shallowRef(FormItem),
        divider: shallowRef(DividerItem),
        textarea: shallowRef(FormItem),
        province: shallowRef(FormItem),
        slider: shallowRef(FormItem),
        tag: shallowRef(FormItem),
        card: shallowRef(CardItem),
        tab: shallowRef(TabItem),
        cascader: shallowRef(FormItem),
        iconSelect: shallowRef(FormItem),
        rate: shallowRef(FormItem),
        transfer: shallowRef(FormItem),
        tree: shallowRef(FormItem),
        colorPicker: shallowRef(FormItem)
      }
    }
  },
  methods: {
    getRefByKey(key) {
      return this.$refs.item ? this.$refs.item.getRefByKey(key) : null
    }
  }
}
</script>
